@import 'reset';

// 1rem = fontSize px
// 1px = (1/fontSize)rem

// 设置设计稿的大小作为标准
$fontSize: 37.5;
@function px2rem($px) {
  @return ($px / $fontSize) + rem;
}

// 一个使用flex让 内部元素水平垂直剧中的方法
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconfont {
  color: #333333;
  font-size: px2rem(20);
}

// 往下展开
.slide-down-enter, .slide-down-leave-to{
  transform: translate3d(0, -100%, 0);
}
.slide-down-enter-to, .slide-down-leave{
  transform: translate3d(0, 0, 0);
}
.slide-down-enter-active, .slide-down-leave-active{
  transition: all 0.3s linear;
}
// 往上展开
.slide-up-enter, .slide-up-leave-to{
  transform: translate3d(0, px2rem(108), 0);
}
.slide-up-enter-to, .slide-up-leave{
  transform: translate3d(0, 0, 0);
}
.slide-up-enter-active, .slide-up-leave-active{
  transition: all 0.3s linear;
}

// 淡入淡出
.fade-enter, .fade-leave-to{
  opacity: 0;
}
.fade-enter-to, .fade-leave{
  opacity: 1;
}
.fade-enter-active, .fade-leave-active{
  transition: all 0.3s linear;
}

// 向右滑动
.slide-to-right-enter, .slide-to-right-leave-to{
  transform: translate3d(-100%, 0, 0)
}
.slide-to-right-enter-to, .slide-to-right-leave{
  transform: translate3d(0, 0, 0)
}
.slide-to-right-enter-active, .slide-to-right-leave-active{
  transition: all 0.3s linear;
}